<!--
 * @Descripttion: 弹幕赛道
 * @version: 1.0
 * @Author: 自由如风
 * @Date: 2021-05-21 20:19:25
 * @LastEditors: 自由如风
 * @LastEditTime: 2021-05-23 15:13:17
-->
<template>
  <div class="barrage-track">
    <Barrage
      ref="barrage"
      v-for="item in list"
      :key="item.id"
      :item="item"
      @onclose="close"
    >
    </Barrage>
  </div>
</template>

<script>
import Barrage from "@/components/Barrage";
export default {
  data() {
    return {
      list: [],
      /**
       * 这个赛道里最后一个弹幕发射的时间
       */
      time: 0,
    };
  },
  components: {
    Barrage,
  },
  methods: {
    /** 添加一个弹幕 赛道 */
    add(barrage) {
      barrage.id = Symbol("id");
      // 设置自己的权重，方便父元素选择赛道
      this.time = Date.now() + barrage.content.length * 10;
      this.list.push(barrage);
    },
    /** 关闭一个弹幕 */
    close({ id }) {
      this.list = this.list.filter((e) => e.id != id);
    },
  },
};
</script>

<style scoped>
.barrage-track {
  position: relative;
  height: 44px;
  margin: 10px 0;
}
</style>
